<template>
  <div class="home">
    <div class="common-layout">
      <el-container>
        <el-header>
          <div class="elheader">
            <h3>陈大本事电商运营平台</h3>
            <el-icon @click="isCollapse = !isCollapse"><Menu /></el-icon>
          </div>

          <span class="header-rigth">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ userStore.username
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="index">首页</el-dropdown-item>
                  <el-dropdown-item command="loginOf">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </el-header>
        <el-container>
          <el-aside width="fit-content">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              collapse-transition
              :default-active="defaultactive"
              @open="handleOpen"
              @close="handleClose"
              text-color="#fff"
              unique-opened
              router
            >
              <el-menu-item :index="'/index'">
                <i class="iconfont homepage"></i>
                <span>首页</span>
              </el-menu-item>

              <el-sub-menu
                :index="index + ''"
                v-for="(item, index) in menusRoutes"
                :key="item.id"
              >
                <template #title>
                  <i class="iconfont" :class="item.icon"></i>
                  <span>{{ item.title }}</span>
                </template>
                <template v-for="citem in item.children" :key="citem.id">
                  <el-menu-item
                    :index="'/' + item.name + '/' + citem.name"
                    v-if="!citem.hidden"
                  >
                    <i class="iconfont" :class="citem.icon"></i
                    >{{ citem.title }}</el-menu-item
                  >
                </template>
                <!-- <img
                  src="@/assets/original_bbc372a3a6f47e5743db2926ff1912b4.png"
                  alt=""
                  width="100"
                  srcset=""
                /> -->
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/module/user";
import { useRoute, useRouter } from "vue-router";
import { computed, ref, watch } from "vue";
import { Menu, ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { loginOut } from "@/common";
const isCollapse = ref(false);
const route = useRoute();
const router = useRouter();

// 创建仓库
const userStore = useUserStore();
console.log(userStore.getMenusRouter);

// 获取玻璃get的数据
const menusRoutes = computed(() => {
  return userStore.getMenusRouter;
});

// 导航高亮设置
const defaultactive = ref("/index");
//监听路由地址 route.path/ums/admin//解决:刷新后高亮与当前路径菜单一致
watch(
  () => route.path,
  (newVal) => {
    defaultactive.value = newVal;
  },
  {
    immediate: true,
  }
);

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

//下拉功能
const handleCommand = (command: string | number | object) => {
  if (command == "index") {
    // 去首页
    router.push("/index");
  } else {
    // // 退出登陆
    // // 删除token
    // localStorage.removeItem("token");
    // // 删除仓库 pinia
    // userStore.updateMenus([]);
    // userStore.username = "";
    // // 清除动态路由 c
    // const allrouter = router.getRoutes();
    // allrouter.forEach((item) => {
    //   if (item.name != "login" && item.name) {
    //     router.removeRoute(item.name);
    //   }
    // });

    // // 跳转到login
    // router.push("login");

    // ----------在common里封装的--------------
    loginOut(
      () => {
        // 告诉后端清除token
      },
      () => {
        // 提示退出成功
        ElMessage.success("退出成功");
      }
    );
  }
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
:deep(.el-header) {
  background-color: #409eff;
  height: 70px;
}
[data-v-0ef3d734] .el-aside {
  width: auto;
}
:deep(.el-main) {
  height: calc(100vh - 70px);
}
:deep(.el-aside) {
  width: 200px;
  height: calc(100vh - 70px);
  background-color: #545c64;
  box-sizing: border-box;
}
:deep(.el-menu) {
  border: 0px solid #000;
}
:deep(.el-header) {
  display: flex;
  justify-content: space-between;

  .header-rigth {
    display: flex;
    align-items: center;
    color: #fff;
  }

  h3 {
    display: inline-block;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
    line-height: 70px;
  }
}
:deep(.el-dropdown-link) {
  color: #fff;
}

.elheader {
  height: 70px;
  display: flex;
  align-items: center;
  :deep(.el-icon) {
    font-size: 26px;
    color: #fff;
  }
}
</style>
